<template>
    <div class="memory-page">
        <!-- tab区域 -->
        <div class="tab">
            <div 
                class="tab-item" 
                :class="{active: currentTab === item.type}" 
                v-for="(item) in tabs" 
                :key="item.type" 
                @click="changeTab(item)"
            >
                <view class="title">{{item.title}}</view>
            </div>
        </div>

        <!-- 搜索 -->
        <Search 
            ref="searchRef" 
            :time="sameTime" 
            :time-type="currentTab"
            @select-change="searchData"
        />
        <div class="page-content" v-if="list.length">
            <template v-if="currentTab === 'spoken'">
                <Speech :list="list"/>
            </template>
            <template v-if="currentTab === 'write'">
                <write :list="list"/>
            </template>
            <template v-if="currentTab === 'computer'">
                <Computer :list="list"/>
            </template>
            <uni-load-more :status="loadStatus" :contentText="contentText" :iconSize="18"></uni-load-more>
        </div>
        <Empty v-else text="还没有人发布回忆哦~"/>
        <div class="add" @click="add">
            <image class="icon-add" src='@/static/icon-add.png' alt=""></image>
        </div>
    </div>
</template>

<script>
    import Search from './components/search.vue'
    import Speech from './pages/speech.vue'
    import Write from './pages/write.vue'
    import Computer from './pages/computer.vue'
    import Empty from '@/components/no-data.vue'
    import {apiGetSpeakList, apiGetWriteList} from '@/api/memory'
    import {imgPreFix} from '@/common/util/util'
    export default {
        components: {
            Search,
            Speech,
            Write,
            Computer,
            Empty
        },
        data(){
            return {
                tabs:[
                    {title: '口语回忆', type: 'spoken', value: 1},
                    {title: '笔试回忆', type: 'write', value: 3},
                    {title: '机考回忆', type: 'computer', value: 2},
                ],
                currentTab: 'spoken',
                page: {
                    pageSize: 10,
                    pageNum: 1
                },
                search: {
                    recallType: 1
                },
                list: [],
                total: 0,
                loadStatus: 'more',
                noMore: false,
                contentText: {
                    contentdown: '', //查看更多
                    contentrefresh: '加载中',
                    contentnomore: '- 已经到底了 -'
                },
                sameTime: '' // 同场回忆的时间
            }
        },
        onReachBottom(){
            if(!this.noMore) {
                this.page.pageNum++
                this.getList()
            }
        },
        onLoad(option){
            uni.setStorageSync('select-school', '')
            this.currentTab = option.type || 'spoken'
            this.search.recallType = this.tabs.find(i => i.type == this.currentTab).value
            this.$tip.loading()
            this.getList()
        },
        onShow(){
            uni.$off()
            this.$refs.searchRef && this.$refs.searchRef.show()
            // 新增和详情页退回刷新列表
            uni.$once('refresh', () => {
                this.searchData()
            })
            // 同场回忆搜索
            uni.$on('same-time', async(val) => {
                this.sameTime = ''
                await this.$nextTick()
                this.sameTime = val.examDate
            })
        },
        onShareAppMessage(res){
            let shareUrl = ''
            if(res.from == 'menu'){
                shareUrl = `/pages/memory/index/index?type=${this.currentTab}`
            }else if(res.from == 'button'){
                const { id = '', type } = res.target.dataset
                shareUrl = `/pages/memory/detail/index?type=${type}&id=${id}`
            }
            return {
                title: "新东方雅思搜题",
                path: shareUrl,
                imageUrl: `${imgPreFix()}/share_img.jpg`
            }
        },
        onShareTimeline(){
            return {
                query: `type=${this.currentTab}`,
                imageUrl: `${imgPreFix()}/share_img.jpg`
            }
        },
        methods: {
            async searchData(val = {}){
                this.$tip.loading()
                this.page.pageNum = 1
                this.search = {...this.search, ...val}
                this.list = []
                await this.$nextTick()
                this.getList()
            },
            changeTab(tab){
                this.$tip.loading()
                this.currentTab = tab.type
                this.search.recallType = tab.value
                this.noMore = false
                this.loadStatus = 'more'
                this.$refs.searchRef && this.$refs.searchRef.init()
            },
            add(){
                uni.navigateTo({
                    url: `/pages/memory/add/index?type=${this.currentTab}`
                });
            },

            // 回忆列表
            getList(){
                const api = this.currentTab == 'spoken' ? apiGetSpeakList : apiGetWriteList
                this.loadStatus = 'loading'
                api({
                    ...this.page,
                    ...this.search
                }).then(res => {
                    if(res.code == 200){
                        let rows = res.data.rows || []
                        if(rows.length && this.currentTab == 'spoken'){
                            rows = rows.map(item => {
                                return {
                                    ...item,
                                    contentList: item.contentList.map(c => {
                                        return {
                                            ...c,
                                            topics: c.isNewTopic ? [{topicType: "疑似新题", type: "new"}] : c.topics
                                        }
                                    })
                                }
                            })
                        }
                        this.list = [...this.list, ...rows] || []
                        this.total = res.data.total
                        this.loadStatus = 'more'
                        if(rows.length < this.page.pageSize){
                            this.noMore = true
                            this.loadStatus = 'noMore'
                        }
                    }
                }).catch(err => {
                    console.log(err, 'err')
                    this.loadStatus = 'more'
                }).finally(res => {
                    this.$tip.loaded()
                })
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .memory-page{
        background-color: #F6F8FC;
        width: 100%;
        min-height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;

        .add{
            position: fixed;
            right: torem(34);
            bottom: torem(235);
            image{
                width: torem(82);
                height: torem(82);
            }
        }
    }
    .tab{
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #fff;
        padding: torem(30) 0 torem(10);
        box-sizing: border-box;
        position: sticky;
        top:0;
        left:0;
        z-index: 99;
        box-shadow: 0 torem(-2) #fff;
        .tab-item{
            color: #666;
            font-size: torem(26);
            padding-bottom: torem(13);
            box-sizing: border-box;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
        }
        .active{
            font-size: torem(32);
            color: #333;
            font-weight: 600;
            &::after{
                content: '';
                display: inline-block;
                width: torem(36);
                height: torem(6);
                background-color: #FD453D;

            }
        }
    }
    .page-content{
        overflow-y: auto;
        width: 100%;
        overflow-x: hidden;
    }

 
</style>

